<template>
  <vue-scroll class="register-page align-vertical">
    <div class="form-wrapper align-vertical-middle">
      <div class="form-box card-base card-shadow--extraLarge">
        <img class="image-logo" src="@/assets/images/logo.svg" alt="logo" />

        <float-label class="styled">
          <input ref="emailbox" v-validate="'required'" name="email" data-vv-as="邮箱" type="email" placeholder="邮箱" v-model.trim="form.email" />
          <span class="error">{{ errorBags.first("email") }}</span>
        </float-label>

        <float-label class="styled">
          <input ref="password" v-validate="'required'" name="password" data-vv-as="密码" type="password" placeholder="密码" v-model.trim="form.password" />
          <span class="error">{{ errorBags.first("password") }}</span>
        </float-label>

        <float-label class="styled">
          <input
            v-validate="'required|confirmed:password'"
            name="confirmpassword"
            data-vv-as="确认密码"
            type="password"
            placeholder="确认密码"
            v-model.trim="form.confirmpassword"
          />
          <span class="error">{{ errorBags.first("confirmpassword") }}</span>
        </float-label>

        <float-label class="styled">
          <input
            type="text"
            id="securitycode"
            v-validate="'required'"
            placeholder="验证码"
            data-vv-as="验证码"
            name="securitycode"
            v-model.trim="form.securitycode"
          />
          <div class="text-right right btnsend">
            <el-button size="small" :disabled="sendbtndisable" @click="sendcode" class="sendcode tada animated pull-right">{{ sendcodetext }}</el-button>
          </div>
          <span class="error">{{ errorBags.first("securitycode") }}</span>
        </float-label>

        <!-- <div class="flex">
          <div class="box grow">
            <el-checkbox>I read and accept terms</el-checkbox>
          </div>
        </div> -->
        <div class="flex text-center center pt-30 pb-20">
          <el-button plain size="small" @click="register" :loading="loading" class="signin-btn tada animated">注册</el-button>
        </div>

        <div class="text-center login-box pt-10">
          已经有账号?
          <a href="/login">登录</a>
        </div>
      </div>
    </div>
  </vue-scroll>
</template>

<script>
export default {
  name: "Register",
  data: () => ({
    form: {
      email: "",
      password: "",
      confirmpassword: "",
      securitycode: "",
    },
    error: null,
    loading: false,
    sendbtndisable: false,
    sendcodetext: "获取验证码",
  }),

  methods: {
    sendcode() {
      this.$validator.validate("email").then((valid) => {
        if (!valid) {
          return;
        } else {
          this.axios.post("/api/account/sendvalidationcode", "email=" + this.form.email).then((response) => {
            this.$message({
              message: "验证码发送成功",
              type: "success",
            });
          });

          const TIME_COUNT = 60; //更改倒计时时间

          if (!this.timer) {
            var that = this;
            that.count = TIME_COUNT;
            that.sendcodetext = "获取验证码" + "(" + this.count + ")";
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                that.sendbtndisable = true;
                that.count--;
                that.sendcodetext = "获取验证码" + "(" + this.count + ")";
              } else {
                that.sendbtndisable = false;
                that.sendcodetext = "获取验证码";
                clearInterval(this.timer); // 清除定时器
                this.timer = null;
              }
            }, 1000);
          }
        }
      });
    },
    register() {
      this.$validator.validate().then((valid) => {
        if (!valid) {
          // do stuff if not valid.
          return;
        } else {
          this.axios.post("/api/account/register", this.form).then((response) => {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.$router.push("/login");
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "../../../assets/scss/_variables";

.register-page {
  background: $background-color;
  margin-left: -30px;
  margin-right: -30px;
  #securitycode {
    width: 160px;
  }
  .btnsend {
    margin-top: -30px;
  }
  .form-wrapper {
    width: 100%;
  }
  input:-internal-autofill-selected {
    -webkit-text-fill-color: #807c7c !important;

    transition: background-color 5000s ease-out 0.5s !important;
  }
  input {
    font-size: 12px !important;
  }
  input:valid {
    border-color: green;
  }

  input:invalid {
    border-color: red;
  }
  .error {
    color: #d7195d;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
  }
  .form-box {
    width: 100%;
    max-width: 340px;
    padding: 30px;
    box-sizing: border-box;
    margin: 20px auto;

    a {
      font-size: 14px;
      color: $text-color-accent;
      text-decoration: none;
      font-weight: 500;
    }

    .image-logo {
      width: 80px;
      margin: 0px auto;
      margin-bottom: 50px;
      display: block;
    }

    .signin-btn {
      width: 160px;
      background: rgba($text-color-accent, 0.2);
      color: $text-color;
      border-color: $text-color;
      border-width: 2px;
      font-weight: bold;
      border-radius: 0;

      &:hover {
        background: rgba($text-color-accent, 0.4);
        border-color: $text-color;
        color: $text-color;
      }
    }

    .login-box {
      font-size: 14px;
    }
  }
}

@media (max-width: 768px) {
  .layout-container .container .view.register-page {
    margin-left: -5px;
    margin-right: -5px;
    max-width: calc(100% + 10px);
  }
}
</style>
